import React, { useState } from 'react';
import { Icon } from 'antd-mobile'



const Lists = (props) => {
    let [state, setState] = useState({ num: [],list: props.lists})
    return (
        <ul className="er" >
            {
                state.list.map((item, i) => {
                    return <li key={item.qlId} >
                        <Icon type={state.num.indexOf(item.qlName) > -1 ? 'down' : 'right'} ></Icon>
                        <span onClick={() => {
                            if(state.num.indexOf(item.qlName) > -1){
                                state.num.splice(state.num.indexOf(item.qlName),1)
                            }else{
                                state.num.push(item.qlName)
                            }
                            setState({ num: state.num, list: props.lists })
                        }}>{item.qlName}</span>
                        <input type="checkbox"  checked={item.check} onChange={(e) => props.checkedItem(e, item,i)}/>
                        <ul className="san" style={state.num.indexOf(item.qlName) > -1 ? { display: 'block' } : { display: 'none' }}>
                            {
                                item.child1.map((v,index) => {
                                    return <li key={v.qlId}>
                                        <span>{v.qlName}</span>
                                        <input type="checkbox" checked={v.check} onChange={(e) =>{
                                            state.list[i].child1[index].check=e.target.checked
                                            let box= state.list[i].child1.every(x=>{
                                                return x.check === true 
                                            })
                                            if(box) {
                                                state.list[i].check=true
                                                setState({ num: state.num, list: props.lists })
                                            }else{
                                                state.list[i].check = false
                                                setState({ num: state.num, list: props.lists })
                                            }

                                            let boy = state.list.every(y => {
                                                return y.check === true
                                            })

                                            if (boy){
                                                props.checkedItem(0, item)
                                            }else{
                                                props.checkedItem(1, item)
                                            }
                                            
                                        }}/>
                                    </li>
                                })
                            }
                        </ul>
                    </li>
                })
            }
        </ul>
    );
}


export default Lists